<template>
<div>
	<h2 class="intro-title">Steps 步骤条</h2>
	<p class="intro-content">引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。</p>

	<demo01></demo01>
	<demo02></demo02>

	<h3 class="base-title">Steps Attributes</h3>
	<table class="attri-table">
		<thead>
			<tr>
				<th>参数</th>
				<th>说明</th>
				<th>类型</th>
				<th>可选值</th>
				<th>默认值</th>
			</tr>
		</thead>
		<tbody>
			<tr v-for='item in list1' :key='item.val1'>
				<td>{{item.val1}}</td>
				<td>{{item.val2}}</td>
				<td>{{item.val3}}</td>
				<td>{{item.val4}}</td>
				<td>{{item.val5}}</td>
			</tr>
		</tbody>
	</table>
	<h3 class="base-title">Step Attributes</h3>
	<table class="attri-table">
		<thead>
			<tr>
				<th>参数</th>
				<th>说明</th>
				<th>类型</th>
				<th>可选值</th>
				<th>默认值</th>
			</tr>
		</thead>
		<tbody>
			<tr v-for='item in list2' :key='item.val1'>
				<td>{{item.val1}}</td>
				<td>{{item.val2}}</td>
				<td>{{item.val3}}</td>
				<td>{{item.val4}}</td>
				<td>{{item.val5}}</td>
			</tr>
		</tbody>
	</table>
</div>
</template>

<script>
import demo01 from './demo01.vue'
import demo02 from './demo02.vue'

const list1 = [{
	val1: 'active',
	val2: '设置当前激活步骤',
	val3: 'number',
	val4: '--',
	val5: '0',
},{
	val1: 'direction',
	val2: '显示方向',
	val3: 'string',
	val4: 'vertical/horizontal',
	val5: 'horizontal',
}].sort((a, b) => {
	return a.val1.localeCompare(b.val1);
});

const list2 = [{
	val1: 'title',
	val2: '标题',
	val3: 'string',
	val4: '--',
	val5: '--',
},{
	val1: 'description',
	val2: '描述性文字',
	val3: 'string',
	val4: '--',
	val5: '--',
}].sort((a, b) => {
	return a.val1.localeCompare(b.val1);
});

export default {
	components: {
		'demo01': demo01,
		'demo02': demo02,
	},
	data () {
		return {
			list1: list1,
			list2: list2,
		};
	},
}
</script>

<style scoped>
</style>
